<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root">
        <school></school>
</div>
<script src="../js/vue.js"></script>
<script>

        Vue.prototype.x=99;
        Vue.config.productionTip=false//阻止vue启动时产生提示
        //定义一个school组件
        const  school=Vue.extend({
            name:'school',
            template:`
                    <div>
                        <h2>学校名称：{{name}}</h2>
                        <h2>学校地址：{{address}}</h2>
                        <button @click="showX">点我输出x</button>
                    </div>
            `,
            data(){
               return{
                   name:'尚硅谷',
                   address:'北京'
               }

            },
            methods:{
               showX(){
                   console.log(this.x)
               }
            }
        })

        const vm=new Vue({
             el: "#root",

             data:{//数据
                  name:'',

                },
             methods:{//方法

             },
             computed:{//计算

             },
             watch:{//监视

             },
             components:{
                school:school
             },
         })
</script>
</body>
</html>